

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>physics collision demo</title>
    <style>
        #container{
            margin:0 auto;
            border:1px solid #000;
            width: 400px;
            height: 400px;
            position: relative;
        }

        .info{
            width: 400px;
            margin: 0 auto;
            text-align: left;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <script src="../../../../build/standalone/hilo-standalone.js"></script>
    <script src="../../../../build/physics/physics.min.js"></script>
    <div id="container"></div>
    <div class='info'>
        <p>鼠标hover在方块上可对方块施力</p>
        <p>绿色(layers:4|8, group:1):其他颜色碰撞，与自己不碰撞</p>
        <p>蓝色(layers:4, group:0):与绿色碰撞，与自己碰撞</p>
        <p>红色(layers:8, group:0):与绿色碰撞，与自己碰撞</p>
    </div>
    <script>
    var gameWidth = 400;
    var gameHeight = 400;
    var stage = new Hilo.Stage({
        width:gameWidth,
        height:gameHeight,
        container:"container"
    });
    stage.enableDOMEvent("mousemove");

    var world = new Hilo.Physics({
        x:0,
        y:300
    });
    world.createBounds(gameWidth, gameHeight);

    var createBox = function(cfg){
        var box = new Hilo.View({
            background:cfg.background,
            alpha:0.8,
            width:30,
            height:30,
            rotation:Math.random()*360,
            x:Math.random()*gameWidth,
            y:Math.random()*gameHeight
        }).addTo(stage);

        world.bindView(box, {
            layers:cfg.layers,
            group:cfg.group
        });
        box.on("mouseover", function(e){
            this.applyImpulse({x:0,y:-400});
        });
    }


    var num = 10;
    var GREEN_COLOR = '#6f9';
    var BLUE_COLOR = '#69f';
    var RED_COLOR = '#f69';

    var GREEN_LAYERS = 2;
    var BLUE_LAYERS = 4;
    var RED_LAYERS = 8;
    //绿色与其他颜色碰撞，与自己不碰撞
    while(num --){
        createBox({
            background:GREEN_COLOR,
            layers:BLUE_LAYERS|RED_LAYERS,
            group:1
        })
    }

    var num = 10;
    //蓝色与绿色碰撞，与自己碰撞
    while(num --){
        createBox({
            background:BLUE_COLOR,
            layers:BLUE_LAYERS,
            group:0
        })
    }

    var num = 10;
    //红色与绿色碰撞，与自己碰撞
    while(num --){
        createBox({
            background:RED_COLOR,
            layers:RED_LAYERS,
            group:0
        })
    }

    var ticker = new Hilo.Ticker(60);
    ticker.addTick(stage);
    ticker.addTick(world);
    ticker.start();
    </script>
</body>
</html>